//菜单公用的样式更改 

 //菜单鼠标hove和active后的文字，背景，图标颜色
 $activeBgColor:rgba(24,144,255,.1) !important;
 $activeTextColor:#1890ff !important;
 //导航菜单图标大小
 $menuIconSize:18px;

 
//菜单导航激活的背景色、文字、图标颜色更改
//放到全局，收缩后的菜单样式才能更改，和app同级
.el-menu,.el-menu--vertical{
    .el-menu-item.is-active,
    .el-menu-item:hover,
    .el-submenu__title:hover{
        //background: #009688 !important;
        background:$activeBgColor;
    }

    .el-menu-item.is-active,
    .el-menu-item.is-active .menu-icon,
    .el-menu-item:hover,
    .el-menu-item:hover .menu-icon,
    .el-menu-item:hover .el-icon-arrow-down:before,
    .el-submenu__title:hover,
    .el-submenu__title:hover .menu-icon,
    .el-submenu__title:hover .el-icon-arrow-down:before{
        color:$activeTextColor;
    }
}

#app{
   
    .menu-container{
        width:100%; height:100%;
        position: relative;

        .slideMenuBtn{
            position: absolute;
            width:50px; height: 50px;
            top:0; right: -50px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 10;

            &:hover{
                background:rgba(245,245,245,.5);
            }
        }

        .slideMenuBtn i{
            display: inline-block;
            font-size: 18px;
        }
    }


    //去除element默认添加的menu样式，改为0s,否则会卡顿
    .horizontal-collapse-transition { 
        transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; 
    } 
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 100%;
        min-height:100%;
    }

    .el-menu{
        width:100% !important;
        border:none;
        height: 100%;

        //菜单文字图标位置样式更改
        .el-menu-item,.el-submenu__title{
           text-align: left;
        }
        .menu-icon{
            font-size: $menuIconSize;
            display: inline-block;
        }
        .menu-font{
            padding:0 10px;
            display: inline-block;
            max-width: 100%;
            overflow:hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
       

    }

   
    .el-menu--collapse{
        .el-submenu__title{
            .menu-font,.menu-font+i{
                display:none; 
            }
        }
    }

    
}



